<template>
  <div class="container">
    <!-- 标题 -->
    <div class="title">
      我的食谱
      <div class="add" @click="() => router.push({ path: '/editCook' })">+</div>
    </div>

    <!-- 搜索框 -->
    <van-search class="search" v-model="searchValue" shape="round" placeholder="搜索食谱" />

    <!-- Tab 切换 -->
    <div class="content">
      <van-tabs style="margin-bottom:50px" v-model:active="activeName" @change="handleTabChange">
        <van-tab title="已发布" name="publish">
          <commonItem :currentData="filteredData"></commonItem>
        </van-tab>
        <van-tab title="已收藏" name="like">
          <commonItem :currentData="filteredData"></commonItem>
        </van-tab>
        <van-tab title="草稿箱" name="draft">
          <commonItem :currentData="filteredData"></commonItem>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getUserId } from "@/utils/getUserId";
import { getMyPublish, getMyLike, getMyDraft } from '@/api/index.js';
import commonItem from '@/components/commonItem.vue';
import { checkPermission } from '@/utils/isLogin.js';

const router = useRouter();
const activeName = ref('publish'); // 默认激活第一个 tab
const searchValue = ref('');       // 用户输入的搜索词

const userId = getUserId();

onBeforeMount(async () => {
  if (!await checkPermission()) {
    return
  }
  fetchData(activeName.value);
})

// 存储不同 tab 的原始数据
const tabData = ref({
  publish: [],
  like: [],
  draft: []
});

// 当前 tab 显示的原始数据
const currentData = ref([]);

// 过滤后的数据（根据搜索框内容）
const filteredData = computed(() => {
  const keyword = searchValue.value.trim().toLowerCase();
  if (!keyword) return currentData.value;

  return currentData.value.filter(item =>
    item.name && item.name.toLowerCase().includes(keyword)
  );
});

// 加载对应 tab 的数据
const fetchData = async (tabName) => {
  switch (tabName) {
    case 'publish':
      if (!tabData.value.publish.length) {
        const res = await getMyPublish(userId);
        tabData.value.publish = res.data || [];
      }
      currentData.value = tabData.value.publish;
      break;
    case 'like':
      if (!tabData.value.like.length) {
        const res = await getMyLike(userId);
        tabData.value.like = res.data || [];
      }
      currentData.value = tabData.value.like;
      break;
    case 'draft':
      if (!tabData.value.draft.length) {
        const res = await getMyDraft(userId);
        tabData.value.draft = res.data || [];
      }
      currentData.value = tabData.value.draft;
      break;
  }
};

// Tab 改变时更新当前数据
const handleTabChange = (name) => {
  fetchData(name);
};


</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.fixed-header {
  position: sticky;
  top: 0;
  z-index: 998;
  background-color: #fff;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 50px;
  background-color: #F0F1F2;
  font-weight: 500;
  font-size: 18px;
  color: #000000;

  .add {
    text-align: center;
    color: #FFF;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #FF6B6B;
    border-radius: 6px;
  }
}

.search {
  padding: 8px 16px;
  background-color: #fff;
}

.content {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 50px; // 如果有底部 tabbar 留出空间
  padding-top: 10px;
}
</style>